<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练情况统计</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">

    <style>
        .contain {
            flex-direction: column;
            background: url(../static/img/bg-con.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: calc(100% - 0.6rem);
            margin: 0.3rem 0 0 0.3rem;
            height: calc(100% - 1rem);

            .contain-tool {
                height: 0.62rem;
                width: calc(100% - 0.5rem);
                margin: 0.2rem 0.25rem 0;
                background-color: #23434E;
                display: flex;
                align-items: center;

                .tool-switch {
                    padding: 0 0.1rem;
                    background-color: #1A3A45;
                    border: 1px solid #84DDD0;
                    border-radius: 0.04rem;
                    height: 0.3rem;
                    line-height: 0.3rem;
                    margin: 0 0.13rem;
                    cursor: pointer;
                    color: #84DDD0;
                }
            }

        }

        .contain-table {
            width: 100%;
            height: 100%;
        }

        .contain-table-list {
            background: none;
            height: calc(100% - 2.2rem);
            border: 1px solid #36A6B7;
            border-top: none;
            padding: 0.2rem;
        }

        .contain-tab {
            display: flex;
            height: 0.4rem;
            line-height: 0.4rem;

            >div {
                width: 1.2rem;
                cursor: pointer;
                text-align: center;
                border: 1px solid #5F7F8A;
                border-bottom: none;
                border-top-left-radius: 0.1rem;
                border-top-right-radius: 0.1rem;
                margin-right: 0.2rem;

                &.active {
                    color: #56FDD5;
                    border-bottom: 1px solid;
                    border-color: #56FDD5;
                }

                >i {
                    margin-right: 0.1rem;
                }
            }
        }

        .layui-table-header {
            background: #318E93;
        }

        .layui-table-view {
            background: #153640;
            position: initial;

        }

        #project-name {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.2rem;
            color: #c9fff2;
        }

        .contain-table-tool {
            border: 1px solid #36A6B7;
            border-bottom: none;
            padding: 0.2rem;
        }

        #export {
            margin: 0 0 0 auto;
        }

        .tool-switch.active {
            filter: drop-shadow(0px 0px 3px #9dffdf);
        }
    </style>
</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">

            </div>
        </div>
        <div class="contain">
            <div class="contain-tool">
                <div class="tool-switch active" id="tool-year">年度</div>
                <div class="tool-switch" id="tool-month">月度</div>
                <div class="tool-switch" id="tool-customize">自定义</div>
                <div class="tool-switch" id="tool-today">今日</div>
            </div>
            <div class="contain-table">
                <div class="contain-tab">
                    <div class="contain-tab-item" data-type=1>爬绳</div>
                    <div class="contain-tab-item" data-type=2>挂钩梯攀爬</div>
                    <div class="contain-tab-item" data-type=4>负重登10楼</div>
                    <div class="contain-tab-item" data-type=5>室内体能</div>
                    <div class="contain-tab-item" data-type=6>一人扶梯一人爬</div>
                </div>
                <div class="contain-table-tool">
                    <form class="layui-form" action="" style="padding-left: 0.05rem;position: relative;">
                        <div class="form-item">
                            <select name="projectId" id="search-projectId" lay-search="{fuzzy: true}"
                                lay-filter="searchProject">
                            </select>
                        </div>
                        <button type="reset" id="resetSearch"
                            class="layui-btn layui-btn-primary btn-reset layui-hide">重置</button>
                        <div class="layui-btn" style="display: none;" id="executeData" onclick="executeData()">
                            同步今日数据
                        </div>
                        <div class="layui-btn" id="export" onclick="exportData()">
                            <img src="../static/img/export.png" />导出
                        </div>


                        <div id="project-name"></div>
                    </form>
                </div>
                <div class="contain-table-list" id="contain-table-list">
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/biz/trainSituation.js"></script>
</body>

</html>